<template>
  <div>
    <el-button @click="exportExcel">点击导出</el-button>
    <el-table :data="tableData"
              border
              ref="report-table"
              :span-method="formatTable"
              style="width: 100%">
      <el-table-column prop="date"
                       label="日期"
                       width="180">
      </el-table-column>
      <el-table-column prop="name"
                       label="姓名"
                       width="180">
      </el-table-column>
      <el-table-column prop="gender"
                       label="性别">
      </el-table-column>
      <el-table-column prop="address"
                       label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'

export default {
  name: 'HelloWorld',
  data () {
    return {
      tableData: [],
      httpData: [{
        date: '2016',
        name: '大一',
        address: '上海市普陀区金沙江路 1518 弄',
        gender: "男"
      }, {
        date: '2016',
        name: '小二',
        address: '上海市普陀区金沙江路 1517 弄',
        gender: "男"
      }, {
        date: '2015',
        name: '张三',
        address: '上海市普陀区金沙江路 1519 弄',
        gender: "男"
      }, {
        date: '2015',
        name: '李四',
        address: '上海市普陀区金沙江路 1516 弄',
        gender: "男"
      }, {
        date: '2014',
        name: '王五',
        address: '上海市普陀区金沙江路 1516 弄',
        gender: "男"
      }, {
        date: '2013',
        name: '赵六',
        address: '上海市普陀区金沙江路 1516 弄',
        gender: "男"
      }, {
        date: '2012',
        name: '赖七',
        address: '上海市普陀区金沙江路 1516 弄',
        gender: "男"
      }, {
        date: '2012',
        name: '冯八',
        address: '上海市普陀区金沙江路 1516 弄',
        gender: "男"
      }, {
        date: '2012',
        name: '冯八',
        address: '上海市普陀区金沙江路 1516 弄',
        gender: "男"
      }, {
        date: '2011',
        name: '李久',
        address: '上海市普陀区金沙江路 1516 弄',
        gender: "男"
      }]
    }
  },
  created() {
    setTimeout(() => {
      this.tableData = this.httpData;
      this.getRowColumn(this.httpData);

    }, 100)
  },
  methods: {
    // 改变
    getRowColumn (data) {
      let self = this;
      self.rowAndColumn = [];
      self.rowRoomColumn = [];
      for (var i = 0; i < data.length; i++) {
        if (i == 0) {
          self.rowAndColumn.push(1);
          self.pos = 0;
          self.rowRoomColumn.push(1);
          self.posT = 0;
        } else {
          if (data[i].date == data[i - 1].date) {
            self.rowAndColumn[self.pos] += 1;
            self.rowAndColumn.push(0);

            if (data[i].name == data[i - 1].name) {
              self.rowRoomColumn[self.posT] += 1;
              self.rowRoomColumn.push(0);
            } else {
              self.rowRoomColumn.push(1);
              self.posT = i;
            }
          } else {
            self.rowAndColumn.push(1);
            self.pos = i;
            self.rowRoomColumn.push(1);
            self.posT = i;
          }
        }
      }
    },
    formatTable ({ row, column, rowIndex, columnIndex }) {
      let self = this;
      if (columnIndex == 0) {
        if (self.rowAndColumn[rowIndex]) {
          let rowNum = self.rowAndColumn[rowIndex];
          return {
            rowspan: rowNum,
            colspan: rowNum > 0 ? 1 : 0
          }
        }
        return {
          rowspan: 0,
          colspan: 0
        }
      }
      if (columnIndex == 1) {
        if (self.rowRoomColumn[rowIndex]) {
          let roomNum = self.rowRoomColumn[rowIndex];
          return {
            rowspan: roomNum,
            colspan: roomNum > 0 ? 1 : 0
          }
        }
        return {
          rowspan: 0,
          colspan: 0
        }
      }
    },
    exportExcel () {
      try {
        const $e = this.$refs['report-table'].$el;
        let $table = $e.querySelector('.el-table__fixed');
        if (!$table) {
          $table = $e;
        }
        const wb = XLSX.utils.table_to_book($table, { raw: true });
        const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
        FileSaver.saveAs(
          new Blob([wbout], { type: 'application/octet-stream' }), '导出.xlsx'
        )
      } catch (e) {
        if (typeof concole !== 'undefined') console.error(e)
      }
    }
  }

}
</script>


<style scoped>
</style>
